<template>
	<div>
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column
			       
			        prop="EMPNO"
			        label="编号"
			        >
			</el-table-column>
			
			 
			<el-table-column
			        prop="ENAME"
			        label="姓名"
			        >
			</el-table-column>
			<el-table-column
			        prop="JOB"
			        label="岗位"
			>
			</el-table-column>
			<el-table-column
			        prop="MGR"
			        label="领导编号"
			        >
			</el-table-column>
			<el-table-column
			        prop="HIREDATE"
			        label="入职日期"
			        >
			</el-table-column>
			<el-table-column
			        prop="SAL"
			        label="薪水"
			>
			</el-table-column>
			<el-table-column
			        prop="dname"
			        label="部门"
			>
			</el-table-column>
			 

			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="deldemo(scope.row.EMPNO)" type="text" size="small">删除</el-button>
				 
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
		 @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
			:current-page="page.current" 
			:page-sizes="[2, 4, 6,8, 10]" 
			:page-size="page.size"
			layout="total, sizes, prev, pager, next, jumper"
			 :total="page.total">
		</el-pagination>
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	import qs from 'qs'
	export default {
		methods: {
			//分页
			  handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
					this.page.size=val;
					this.queryData();
			      },
			      handleCurrentChange(val) {
			        console.log(`当前页: ${val}`);
					this.page.current=val;
					this.queryData();
			      },
			
			 
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 4 === 0) {
					return 'warning-row';
				} else if (rowIndex % 4 === 2) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				// alert(JSON.stringify(this.searchform));
				//向后台发出请求，返回数据
				//第一种： const newobj={...this.searchform,...this.page};// 合并对象  ...
				// alert(JSON.stringify(newobj));
				const newobj=Object.assign(this.searchform,this.page);
				// alert(JSON.stringify(newobj));
				this.$axios.get("http://localhost:9999/emp/selAll", {
					
						// user:this.searchform.user,
						// pass:this.searchform.pass,
						// current:this.page.current,
						// size:this.page.size,
						params:newobj,
						
					
				}).then(r => {
					// alert(JSON.stringify(r.data.t))
					this.tableData = r.data.t.records;
					// alert(JSON.stringify(this.tableData))
					// var aa=JSON.stringify(this.tableData)
					this.page.total=r.data.t.total;

				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			 
			deldemo(EMPNO) {
				// alert(id);
				//根据id删除数据
				//物理删除
				// this.$axios.delete("t-demo/" + id).then(r => {
				// 	alert(r.data.msg);

				// })
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击确认的按钮
					this.$axios.delete("emp/" + EMPNO).then(r => {
						this.$message({
							showClose: true,
							type: 'success',
							message: '删除成功!'
						});
						// 	//刷新数据
						this.queryData();
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},

		data() {
			return {
				tableData: [],
			 
				  
				searchform: {
				 
				},
				 page:{
					 current:1,
					 total:99,
					 size:4
				 }
			}
		},
		created() {
			this.queryData();
		}
	}
</script>
<style>
</style>
